<template>
    <div style="overflow: auto; height: 750px;width: 100%">
        <div style="margin: 0 10%">
        <el-row>
            <el-col :span="24">
                <el-card>
                    <el-col :span="10" :offset="2">
                    <img src="../../../../resources/images/yinying.jpg" style="width: 300px; height: 300px; float: left; margin: 10px">
                    </el-col>
                        <el-col :span="12">
                    <el-form ref="form" :model="form" label-width="120px" class="detail"  v-loading="loading">
                        <el-form-item label="图书名称:">
                            {{form.bookName}}
                        </el-form-item>
                        <el-form-item label="出版社:">
                            {{form.publisher}}
                        </el-form-item>
                        <el-form-item label="出版日期:">
                            {{form.publishTime}}
                        </el-form-item>
                        <el-form-item label="作者:">
                            {{form.author}}
                        </el-form-item>
                        <el-form-item label="价格:">
                            {{form.price}}
                        </el-form-item>
                        <el-form-item label="图书类型:">
                            {{form.bookType}}
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="onBorrow">图书借阅申请</el-button>
                        </el-form-item>
                    </el-form>
                        </el-col>
                </el-card>
            </el-col>
        </el-row>
        <div>
            <el-card >
                <div slot="header" >
                    <el-row  style="margin: 20px 0">
                        <el-col :span="2" :offset="1">
                            <span style="font-size: 18px;font-weight: bold">图书评论</span>
                        </el-col>
                        <el-col :span="8" :offset="12">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage4"
                                    :page-sizes="[10, 20, 30, 40]"
                                    :page-size="filter.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total">
                            </el-pagination>
                        </el-col>
                    </el-row>

                </div>
                <el-card>
                    <el-row>
                        <el-col :span="2" :offset="1">
                            图书名称
                        </el-col>
                        <el-col :span="10" :offset="1">
                            评论内容
                        </el-col>
                        <el-col :span="2" :offset="1">
                            评论人
                        </el-col>
                        <el-col :span="3" :offset="1">
                            评论时间
                        </el-col>
                    </el-row>
                </el-card>
                <template v-if="listData.length === 0">
                    <el-card shadow="hover">
                        <el-row  style="margin: 20px 0">
                            <el-col :span="2" :offset="12">
                                <span>暂无评论</span>
                            </el-col>
                        </el-row>
                    </el-card>
                </template>

                <div v-for="(item, idx) in listData" :key="idx"  style="padding: 3px 2px ">
                    <el-card shadow="hover">
                        <el-row  style="margin: 20px 0">
                            <el-col :span="2" :offset="1">
                                <span>{{item.bookName}}</span>
                            </el-col>
                            <el-col :span="10"  :offset="1">
                                <span>{{item.content}}</span>
                            </el-col>
                            <el-col :span="2"  :offset="1">
                                <span>{{item.readerName}}</span>
                            </el-col>
                            <el-col :span="3" :offset="1">
                                <span>{{item.createTime}}</span>
                            </el-col>
                        </el-row>
                    </el-card>

                </div>
            </el-card>

        </div>
        </div>
    </div>
</template>

<script>
    import { borrowing } from '../../../module/admin/book/bookBorrowing';
    import { getBookInfo } from '../../../module/admin/book/bookInfo';
    import { getBookType } from '../../../module/admin/book/bookType';
    import  { getBookComments } from '../../../module/admin/book/bookComment';

    export default {
        data() {
            return{
                form: {
                    id: '',
                    bookName: '',
                    publisher: '',
                    publishTime: '',
                    author: '',
                    price: '',
                    bookType: '',
                },
                listData: [],
                loading: true,
                visible2: false,
                filter: {
                    pageNum: 1,
                    pageSize: 10,
                },
                search: {
                    key: '',
                    value: ''
                },
                total: 0,
                currentPage4: 1,
                test: '',

            }
        },
        mounted () {
            let _this = this;
            this.form = _this.$route.params.book;
            this.$nextTick(function () {
                /*getBookInfo(bookInfoId).then(data => {
                    getBookType(data.bookType).then(bookType => {
                        _this.form.bookType = bookType.name;
                    });
                    _this.form.id = data.id;
                    _this.form.bookName = data.bookName;
                    _this.form.publisher = data.publisher;
                    _this.form.publishTime = data.publishTime;
                    _this.form.author = data.author;
                    _this.form.price = data.price;
                    _this.loading = false;
                })*/
                _this.search.key = 'bookInfoId';
                _this.search.value = _this.form.id;
                getBookComments(_this);
                _this.loading = false;
            });
        },
        methods: {
            onBorrow() {
                let readerId = sessionStorage.getItem('readerId');
                if (readerId === '' || readerId === null ) {
                    this.$notify({
                        title: '提示',
                        message: '请先登录',
                        type: 'warning'
                    });
                } else {
                    let _this = this;
                    let param = {
                        bookInfoId:_this.form.id,
                        readerId: readerId
                    };
                    borrowing(param).then(function (data) {
                        if ("success" === data.data) {
                            _this.$message({
                                type: 'success',
                                center: true,
                                message: '借阅申请成功!'
                            });
                            _this.$router.push({
                                name: "reader-my-book"
                            })
                        } else if("error" === data.data) {
                            _this.$message({
                                type: 'error',
                                center: true,
                                message: '图书库存不足， 请联系管理员!'
                            });
                        }
                    }).catch(function (error) {
                        console.log('======================>>>',error);
                        _this.$message({
                            type: 'error',
                            center: true,
                            message: '借阅申请失败!'
                        });
                    });
                }

            },
            handleSearchChange() {
                getBookComments(this);
            },
            handleSizeChange(val) {
                this.filter.pageSize = val;
                getBookComments(this);
            },
            handleCurrentChange(val) {
                this.filter.pageNum = val;
                getBookComments(this);
            },
        }
    }


</script>